<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tableList"
      :pagination="false"
      :scroll="{ x: 1500 }"
    >
      <!-- //发件信息 -->
      <span slot="fromFirstAddress" slot-scope="text, record">
        {{ record.fromRecipient }}<br />
        {{ record.fromContactPhone }}<br />
        {{ record.fromFirstAddress }},{{ record.fromCity }},{{
          record.fromProvinceName
        }}, {{ record.fromCountryName }},{{ record.fromPostalCode }}
      </span>
      <!-- 收件信息 -->
      <span slot="toFirstAddress" slot-scope="text, record">
        {{ record.toRecipient }}<br />
        {{ record.toContactPhone }}<br />
        {{ record.toFirstAddress }},{{ record.toCity }},{{
          record.toProvinceName
        }}, {{ record.toCountryName }},{{ record.toPostalCode }}
      </span>
      <!-- 创建时间 -->
      <span slot="createTime" slot-scope="text, record">
        {{
          record.createTime
            ? record.createTime.replace("T", "  ")
            : record.createTime.replace("T", "  ")
        }}
      </span>
      <!-- 状态 -->
      <span slot="state" slot-scope="text, record">
        <span style="color: #3eae7c">
          {{ record.state }}
        </span>
      </span>
      <!-- 包裹信息 -->
      <span slot="id" slot-scope="text, record">
        <div v-for="(item, i) in record.parcelList" :key="i">
          <span>
            {{ item.weightNumber }}KG;{{ item.lengthNumber }}*{{
              item.widthNumber
            }}*{{ item.heightNumber }}CM
          </span>
        </div>
      </span>
      <!-- 物流信息 -->
      <span slot="parcelList" slot-scope="text, record">
        <div v-for="(item, i) in record.parcelList" :key="i">
          <span>
            {{ item.logisticsName }}<br />
            {{ item.waybillNo }}
          </span>
        </div>
      </span>
      <!-- 费用 -->
      <span slot="fromContactPhone" slot-scope="text, record">
        <div v-for="(item, i) in record.parcelList" :key="i">
          {{ item.totalCost }} {{ item.currency }}
        </div>
      </span>
      <!-- 备注 -->
      <span slot="remark" slot-scope="text, record">
        {{ record.remark === null ? "暂无" : record.remark }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a
          v-if="record.applyState != '45'"
          :style="
            record.applyState != '15'
              ? 'color: #ccc; text-decoration: underline;'
              : 'color: #2929e0;text-decoration: underline;'
          "
          :disabled="record.applyState != '15'"
          href="javascript:;"
          @click="onSubmitRow(record, 'info')"
          >提交
        </a>
        <a-divider v-if="record.applyState === '5'" type="vertical" />
        <a
          v-if="record.applyState === '5'"
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="editRowData(record, 'info')"
          >编辑
        </a>
        <a-divider v-if="record.applyState != '45'" type="vertical" />
        <a
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="showModal(record, 'info')"
          >打印运单
        </a>
      </span>
    </a-table>

    <PrintWayBill
      :showModals="showModal"
      :getTableList="getTableList"
      :dto="dto"
      :port='port'
      ref="PrintWayBill"
   
    />
  </div>
</template>

<script>
import {
  waybill_messageInfo,
  waybill_state,
} from "@/apis/system/BuyWaybill/BuyWaybill";
import PrintWayBill from "@/components/system/BuyWaybill/PrintWayBill.vue";
export default {
  props: ["tableList", "getTableList",'port'],
  components: {
    PrintWayBill,
  },
  data() {
    return {
      dto: {},
    };
  },
  methods: {
    //提交每一行数据到已发货
    onSubmitRow(record) {
      let _this=this;
      this.$confirm({
        title: `确定要提交订单编号为${record.waybillCode}得订单吗?`,
        cancelText: "取消",
        okText: "确定",
        onOk() {
          return new Promise((resolve) => {
            setTimeout(async () => {
              let { code } = await waybill_state(record.id, "45");
              if (code === "10000") {
                _this.getTableList();
                resolve();
              } else {
                resolve();
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    async showModal(record) {
      let { code, responseBody } = await waybill_messageInfo(record.id);
      if (code === "200") {
        this.dto = { ...responseBody };
        this.dto.sign = responseBody.sign === "1" ? true : false;
        // this.dto.parcelList.forEach((item)=>{
        //  item.consultLoading=false;
        // })
        this.$refs.PrintWayBill.showModal();
      }
    },
    //编辑每一行
    editRowData(record) {
      setTimeout(() => {
        this.$bus.$emit("BuyWaybillModal", record);
      }, 1);
    },
  },
  computed: {
    columns() {
      if(this.port!='client'){
        return [
          {
            title: "订单编号",
            dataIndex: "waybillCode",
            align: "center",
            scopedSlots: { customRender: "waybillCode" },
            width: "8%",
  
            //  fixed: "left",
          },
          {
            title: "客户编号",
            dataIndex: "tenantId",
            scopedSlots: { customRender: "tenantId" },
            align: "center",
            width: "8%",
          },
          {
            title: "发件信息",
            dataIndex: "fromFirstAddress",
            align: "center",
            scopedSlots: { customRender: "fromFirstAddress" },
            width: "10%",
          },
          {
            title: "收货信息",
            dataIndex: "toFirstAddress",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "toFirstAddress" },
          },
          {
            title: "包裹信息",
            dataIndex: "id",
            // ellipsis: true,
            scopedSlots: { customRender: "id" },
            align: "center",
            width: "12%",
          },
          {
            title: "物流信息",
            dataIndex: "parcelList",
            scopedSlots: { customRender: "parcelList" },
            align: "center",
            width: "12%",
            // ellipsis: true,
          },
          {
            title: "费用",
            dataIndex: "fromContactPhone",
            scopedSlots: { customRender: "fromContactPhone" },
            align: "center",
            width: "8%",
            // ellipsis: true,
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            scopedSlots: { customRender: "createTime" },
            align: "center",
            width: "8%",
          },
          {
            title: "状态",
            dataIndex: "state",
            scopedSlots: { customRender: "state" },
            align: "center",
            width: "8%",
          },
          {
            title: "备注 ",
            dataIndex: "remark",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "remark" },
            // ellipsis: true,
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
            width: 200,
            fixed: "right",
          },
        ];
      }else{
            return [
          {
            title: "订单编号",
            dataIndex: "waybillCode",
            align: "center",
            scopedSlots: { customRender: "waybillCode" },
            width: "8%",
  
            //  fixed: "left",
          },
          {
            title: "发件信息",
            dataIndex: "fromFirstAddress",
            align: "center",
            scopedSlots: { customRender: "fromFirstAddress" },
            width: "10%",
          },
          {
            title: "收货信息",
            dataIndex: "toFirstAddress",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "toFirstAddress" },
          },
          {
            title: "包裹信息",
            dataIndex: "id",
            // ellipsis: true,
            scopedSlots: { customRender: "id" },
            align: "center",
            width: "12%",
          },
          {
            title: "物流信息",
            dataIndex: "parcelList",
            scopedSlots: { customRender: "parcelList" },
            align: "center",
            width: "12%",
            // ellipsis: true,
          },
          {
            title: "费用",
            dataIndex: "fromContactPhone",
            scopedSlots: { customRender: "fromContactPhone" },
            align: "center",
            width: "8%",
            // ellipsis: true,
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            scopedSlots: { customRender: "createTime" },
            align: "center",
            width: "8%",
          },
          {
            title: "状态",
            dataIndex: "state",
            scopedSlots: { customRender: "state" },
            align: "center",
            width: "8%",
          },
          {
            title: "备注 ",
            dataIndex: "remark",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "remark" },
            // ellipsis: true,
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
            width: 200,
            fixed: "right",
          },
        ];
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>